import { Button, Drawer, Space, message } from 'antd'
import { WarningOutlined, CloseSquareOutlined } from '@ant-design/icons'
import { Avatar, Card } from 'antd'
import './index.scss'
import dayjs from 'dayjs'
import { getReportDeleteAPI } from '@/api/report'
import { getBlogStatusModifyAPI } from '@/api/blog'
import { getMessageAddAPI } from '@/api/user'

const { Meta } = Card
 
const DrawerAgain = ({ open, closeDrawer, blogInfo, reportInfo, onUpdate }) => {
    // eslint-disable-next-line react/prop-types
    const onClose = (value) => {
        closeDrawer(value)
    }    
    // 下架博客
    const offBlog = async () => {
        const res = await getBlogStatusModifyAPI({ id: blogInfo.id,state: "下架" })
        if (res.code === 1) {
            message.success('该博客下架成功!')
            await getReportDeleteAPI(reportInfo.id)
            onUpdate(reportInfo)
            onClose()
            await getMessageAddAPI({
                userId: blogInfo.userId,
                text: "抱歉，您的博客有违规消息，已被下架。"
            })
        } else {
            message.error(res.msg)
        }
    }
    // 驳回举报
    const deleteReport = async () => {
        const res = await getReportDeleteAPI(reportInfo.id)
        if (res.code === 1) {
            message.success('该举报驳回成功!')
            onUpdate(reportInfo)
            onClose()
        } else {
            message.error(res.msg)
        }
    }
    return (
        <div>
            <Drawer
                maskStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.1)' }} // 设置蒙层的背景颜色和透明度
                title="举报详情"
                width={700}
                onClose={() => onClose(false)}
                open={open}
                extra={
                <Space>
                    <Button onClick={() => onClose(false)}>取消</Button>
                    <Button type="primary" onClick={() => onClose(false)}>
                    确认
                    </Button>
                </Space>
                }
            >
                <Card className="report-box">
                    <div className="report-time">举报时间：{dayjs(reportInfo.createTime).format('YYYY-MM-DD')}</div>
                    <div className="report-content">举报内容：{reportInfo.text}</div>
                    <div className="blog-content">
                        博客详情：
                        <Card className="blog-content-box">
                            <div className="content-header">
                                <h1 className="title">{blogInfo.title}</h1>
                                <Meta
                                avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />}
                                title={`作者名： ${blogInfo.author} `}
                                description={`提交时间：${dayjs(blogInfo.createTime).format('YYYY-MM-DD')}`}
                            />
                            </div>
                            <div className="content-main" dangerouslySetInnerHTML={{ __html: blogInfo.text }}>
                            </div>
                        </Card>
                    </div>
                        <Button 
                            danger
                            type="primary"
                            onClick={offBlog}
                            icon={<WarningOutlined />}>
                            下架博客
                        </Button>
                        <Button 
                          type="primary" 
                          onClick={deleteReport}  
                          icon={<CloseSquareOutlined />}>
                            驳回举报
                        </Button>
                </Card>
            </Drawer>
        </div>
    )
}

export default DrawerAgain
